import React, { useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Image, Modal, Button, TextInput } from 'react-native';
import Payment from '@/components/common/pay/Payment';
import Mytranslation from './mytranslation';
import { useRouter } from 'expo-router';
import { RootState } from '@/store/paystore';
import { useSelector } from 'react-redux';
import Translate from '@/components/common/translation/Translate';
import i18next from 'i18next';

export default function Translations() {
    const [modalVisible, setModalVisible] = useState(false);
    const router = useRouter();
    const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
    const { isTraslation, translationDate } = useSelector((state: RootState) => state.userTranslation);
    const hasTranslationPackage = useSelector(
        (state: RootState) => state.userTranslationstatus.hasTranslationPackage
    );

    const paymentOptions = [
        {
            id: 0,
            content: '翻译包',
            description: '7天翻译包',
            price: 38,
            originalPrice: 48,
            duration: '7天',
        },
        {
            id: 1,
            content: '翻译包',
            title: '最热销',
            description: '1年翻译包',
            price: 198,
            originalPrice: 398,
            duration: '1年',
        },
        {
            id: 2,
            content: '翻译包',
            title: '最省钱',
            description: '终身翻译包',
            price: 698,
            originalPrice: 998,
            duration: '终身',
        },
    ];

    const handlePress = (index: number) => {
        setSelectedIndex(index); // 更新选中的索引
    };

    const handlePurchase = () => {
        if (selectedIndex !== null) {
            const selectedOption = paymentOptions[selectedIndex];
            router.push({
                pathname: '/my/paymoney',
                params: {
                    content: selectedOption.content,
                    description: selectedOption.description,
                    price: selectedOption.price,
                    originalPrice: selectedOption.originalPrice,
                    duration: selectedOption.duration,
                }
            });
        }
    };

    const isTranActive = isTraslation && new Date() < new Date(translationDate);

    const formattedDate = new Date(translationDate).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
    });

    const change = () => {
        console.log('change', hasTranslationPackage);
        if (hasTranslationPackage) {
            i18next.changeLanguage('en');
        } else {
            setModalVisible(true);
        }
    }

    return (
        <View style={styles.all}>
            <View style={styles.header}>
                <View style={styles.headerLeft}>
                    <TouchableOpacity onPress={() => router.back()}>
                        <Image source={require('../../assets/images/back.png')} style={styles.headerImg} />
                    </TouchableOpacity>
                    <Text style={styles.title}>
                        <Translate i18nKey='translation package'>
                        </Translate>
                    </Text>
                    <Image source={require('../../assets/images/erji.png')} style={styles.headerImg} />
                </View>
                <View style={styles.headerRight}>
                    <Text style={styles.content}>{
                        isTranActive ? `有效期至 ${formattedDate}` : '当前未开通翻译包'
                    }
                    </Text>
                </View>
            </View>
            <View style={styles.main}>
                <View style={styles.container}>
                    {paymentOptions.map((option, index) => (
                        <TouchableOpacity key={option.id} onPress={() => handlePress(index)}>
                            <Payment
                                style={[
                                    styles.card,
                                    selectedIndex === index && styles.selectedCard, // 判断是否选中
                                ]}
                                content={option.content}
                                title={option.title}
                                description={option.description}
                                price={option.price}
                                originalPrice={option.originalPrice}
                                isSelected={selectedIndex === index} // 传递选中状态
                            />
                        </TouchableOpacity>
                    ))}
                </View>
                {/* 立即购买按钮 */}
                <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.button} onPress={handlePurchase}>
                        <Text>{isTranActive ? '续费' : '立即购买'}</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.warningContainer}>
                    <Image source={require('../../assets/images/waring.png')} style={styles.warningIcon} />
                    <TouchableOpacity onPress={() => {
                        change()
                    }}>
                        <Text style={styles.warningText}>购买后,可以翻译国际常用语言,在翻译包存续期间无限次使用</Text>
                    </TouchableOpacity>
                </View>
            </View>
            {/* Modal 示例 */}
            <View style={styles.container}>
                <Button title="Show Modal" onPress={() => setModalVisible(true)} />
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}
                    onRequestClose={() => setModalVisible(false)}
                >
                    <View style={styles.modalOverlay}>
                        <View style={styles.modalContent}>
                            <Mytranslation closeModal={() => setModalVisible(false)} />
                        </View>
                    </View>
                </Modal>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    label: {
        fontSize: 16,
        marginBottom: 10,
    },
    input: {
        width: '100%',
        height: 50,
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 5,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    result: {
        marginTop: 20,
        fontSize: 16,
    },
    paymentStatus: {
        fontSize: 18,
        marginTop: 20,
    },
    modalContent: {
        height: 280,
        marginTop: 200,
        width: 350,
        borderRadius: 10,
        backgroundColor: 'white',
        alignItems: 'center',
    },
    modalOverlay: {
        height: '100%',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
    },
    closeButton: {
        fontSize: 14,
        color: 'blue',
        textAlign: 'center', // 按钮居中
    },
    content: {
        fontSize: 12,
        fontWeight: 'bold',
    },
    headerRight: {
        marginTop: 18,
        marginLeft: 20
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    headerLeft: {
        marginTop: 12,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    headerImg: {
        width: 25,
        height: 25,
        marginRight: 10,
        marginLeft: 10,
    },
    header: {
        backgroundColor: 'rgb(38, 235, 218)',
        width: '100%',
        height: 150,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
    },
    warningContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
    },
    warningText: {
        fontSize: 9,
    },
    warningIcon: {
        width: 15,
        height: 15,
        marginRight: 5
    },
    all: {
        backgroundColor: 'rgb(249, 249, 249)',
        height: '100%',
    },
    container: {
        marginTop: 20,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    card: {
        width: 105,
        borderWidth: 1,
        borderColor: '#ccc', // 默认边框颜色
    },
    selectedCard: {
        borderColor: '#00a676', // 选中时的边框颜色
    },
    main: {
        backgroundColor: '#fff',
        borderRadius: 10,
        margin: 10,
        shadowColor: '#000',
        height: 300,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        alignContent: 'center',
        marginTop: -30,
    },
    buttonContainer: {
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'rgb(38, 235, 218)',
        padding: 10,
        borderRadius: 20,
        alignItems: 'center',
        marginTop: 50,
        width: 200,
    }
});
